<template>
	<view class="user-company">
		<view class="user-company-info" v-if="!isShowCompanySon">
			<view class="company-top flex-center">
				<image
					class="company-top-avatar"
					:src="logo"
					mode="aspectFill"
					@click="uploadImage('logo')">
				</image>
				<view class="company-top-info">
					<view class="company-top-info-name">
						{{companyName}}
					</view>
					<view class="company-top-info-number">
						编号:{{number}}
					</view>
					<text class="company-top-info-date">
						{{datetime}}开通
					</text>
				</view>
				<view v-if="isEnterprise" class="company-top-son" @click="showCompanySon">
					企业用户
				</view>
			</view>
			<view class="company-list">
				<view class="company-list-item flex-center">
					<view class="company-list-item-name">联系人</view>
					<input
						:disabled="!isEnterprise"
						class="company-list-item-value"
						:value="name"
						data-name="name"
						placeholder="请输入联系人"
						@input="inputChange" />
				</view>
				<view class="company-list-item flex-center">
					<view class="company-list-item-name">单位名称</view>
					<input
						:disabled="!isEnterprise"
						class="company-list-item-value"
						:value="companyName"
						data-name="companyName"
						placeholder="请输入单位名称"
						@input="inputChange" />
				</view>
				<view class="company-list-item flex-center">
					<view class="company-list-item-name">邮箱</view>
					<input
						:disabled="!isEnterprise"
						class="company-list-item-value"
						:value="email"
						data-name="email"
						placeholder="请输入邮箱"
						@input="inputChange" />
				</view>
				<view class="company-list-item flex-center">
					<view class="company-list-item-name">单位地址</view>
					<input
						:disabled="!isEnterprise"
						class="company-list-item-value"
						:value="address"
						data-name="address"
						placeholder="请输入单位地址"
						@input="inputChange" />
				</view>
				<view class="cert-add-tit">修改营业执照：</view>
				<view class="cert-add-upload">
					<image
						class="cert-add-upload-img"
						:src="license"
						mode="aspectFill"
						@click="uploadImage('license')">
					</image>
					<view class="cert-add-upload-notice">
						请确保上传的照片边框完整、字体清晰、亮度均匀
					</view>
				</view>
			</view>
			
			<view class="submit-btn">
				<button v-if="isEnterprise" @click="editCompanyInfo">保存修改</button>
				<button v-if="!isEnterprise" @click="deleteCompanyLink">解绑账号</button>
			</view>
		</view>
		<view class="user-company-son" v-else>
			<view class="user-company-son-list" v-if="companySonList.length">
				<view
					class="son-item flex-center-between"
					v-for="item in companySonList"
					:key="item.id"
					@click="action(item.id)">
					<text>{{item.nickname}}</text>
					<text>
						{{item.status === 0 ? '申请中' : item.status === 1 ? '已审核' : item.status === 2 ? '已驳回' : '其他'}}
					</text>
				</view>
			</view>
			<view class="no-data" v-else>
				<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
				暂无关联用户
			</view>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list.vue'
	import uniListItem from '@/components/uni-list-item.vue'
	export default {
		components: {
			uniList,
			uniListItem,
		},
		data() {
			return {
				isEnterprise: null, //1.true：添加的认证; 2.false：绑定的认证
				id: null,
				logo: '',
				number: '',
				datetime: '',
				name: '',
				companyName: '',
				email: '',
				address: '',
				license: '',
				isShowCompanySon: false,
				companySonList: [],
			}
		},
		onLoad() {
			this.getCompanyInfo()
		},
		methods: {
			/**
			 * 获取企业信息
			 */
			async getCompanyInfo() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/my',
					data: {}
				})
				if (res.status === 1) {
					if(res.data){
						this.id = res.data.baseInfo.id,
						this.companyName = res.data.baseInfo.name,
						this.number = res.data.baseInfo.number,
						this.name = res.data.baseInfo.delegate,
						this.datetime = res.data.baseInfo.createtime,
						this.email = res.data.baseInfo.email,
						this.address = res.data.baseInfo.address,
						this.license = this.$baseUrl + res.data.baseInfo.license,
						this.logo = res.data.baseInfo.logo ? this.$baseUrl + res.data.baseInfo.logo : '../../static/images/avatar-agent.png',
						this.isEnterprise = res.data.is_enterprise
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 修改企业信息
			 */
			async editCompanyInfo() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/edit',
					data: {
						name: this.companyName,
						number: this.number,
						delegate: this.name,
						email: this.email,
						address: this.address,
						logo: this.logo.replace(this.$baseUrl, '').trim(),
						license: this.license.replace(this.$baseUrl, '').trim()
					}
				})
				if (res.status === 1) {
					uni.navigateBack()
					uni.showToast({
						title: '成功修改企业信息',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 解除企业关联
			 */
			async deleteCompanyLink() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/cancel',
					data: { id: this.id }
				})
				if (res.status === 1) {
					uni.switchTab({ url: '/pages/user/user' })
					uni.showToast({
						title: '解除企业关联',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 上传营业执照
			 * @param {String} type
			 */
			uploadImage(type) {
				if (!this.isEnterprise) {
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.$baseUrl + '/api/upload/picture',
							filePath: tempFilePaths[0],
							name: 'images',
							header: {
								'content-type': 'multipart/form-data',
								'token': uni.getStorageSync('USER_INFO').token || '',
								'way': 'app',
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data)
								this[type] = this.$baseUrl + uploadFileRes.data
							},
							fail: (err) => {
								uni.showToast({
									title: '上传失败' + err,
									icon: 'none'
								})
							}
						});
					}
				});
			},
			/**
			 * 展示企业用户
			 */
			async showCompanySon() {
				this.isShowCompanySon = true
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/user',
					data: {}
				})
				if (res.status === 1) {
					this.companySonList = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 审核认证申请
			 * @param {Number} id
			 * @param {Number} index
			 */
			async actionAppli(id, index) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/user_verify',
					data: {
						id: id,
						status: index === 0 ? 1 : index === 1 ? 2 : 4, //1'通过审核', 2'驳回申请', 4'删除申请'
						remark: '',
					}
				})
				if (res.status === 1) {
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 3000
					})
					this.showCompanySon()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 通过审核 or 驳回申请 or 删除申请
			 * @param {Number} id
			 */
			action(id) {
				uni.showActionSheet({
					itemList: ['通过审核', '驳回申请', '删除申请'],
					success: res => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.actionAppli(id, res.tapIndex)
					}
				});
				
			},
			/**
			 * 监听表单
			 * @param {Object} e
			 */
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-company{
		.user-company-info {
			.company-top{
				height: 330rpx;
				width: 750rpx;
				background: #3C3E49;
				margin-bottom: 20rpx;
				position: relative;
				&-avatar{
					height: 134rpx;
					width: 134rpx;
					margin: 0 50rpx;
					border: 6rpx solid #fff;
					border-radius: 50%;
					background: $uni-bg-color-grey;
				}
				&-info{
					color: $uni-text-color-inverse;
					&-name{
						font-size: $uni-font-size-base;
					}
					&-number{
						font-size: $uni-font-size-sm2;
					}
					&-date{
						padding: 6rpx 20rpx;
						border-radius: 20rpx;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm1;
						background: rgba(0,0,0,0.2);;
					}
				}
				&-son{
					position: absolute;
					top: 0;
					right: 0;
					height: 90rpx;
					line-height: 90rpx;
					padding: 0 30rpx;
					color: #fff;
					font-size: $uni-font-size-sm2;
				}
			}
			.company-list{
				padding: 0 30rpx;
				background: $uni-bg-color;
				&-item{
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&-name{
						width: 180rpx;
						color: $uni-text-color-grey2;
						margin-right: 60rpx;
					}
					&-value{
						width: 100%;
					}
				}
				.cert-add-tit{
					padding: 30rpx 0;
					color: $uni-text-color-grey2;
				}
				.cert-add-upload{
					padding: 0 40rpx 40rpx;
					.cert-add-upload-img{
						width: 426rpx;
						height: 252rpx;
						display: block;
						margin: 20rpx auto;
						background: $uni-bg-color-grey2;
					}
					.cert-add-upload-notice{
						text-align: center;
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm1;
					}
				}
			}
			.submit-btn{
				padding: 0 30rpx;
			}
		}
		.user-company-son{
			&-list{
				padding: 0 30rpx;
				background: $uni-bg-color;
				.son-item{
					height: 110rpx;
					line-height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
				}
			}
		}
	}
</style>
